<template>
    <div class="Nav">
        <div class="Nav-left">
            <ul>
                <li><router-link to="/" class="home-link">首页</router-link></li>
                <li><router-link to="/News">新闻</router-link></li>
                <li><router-link to="/Products">产品介绍</router-link></li>
                <li><router-link to="/Audiovisual">视听站</router-link></li>
                <li><router-link to="/My">作者主页</router-link></li>
            </ul>
        </div>
        <div class="Nav-right" @click="goToWebsite">
            <img src="../assets/img/游戏科学logo.png">
        </div>
    </div>
</template>

<script>
export default {
    name: "Nav",
    methods: {
        goToWebsite() {
            window.location.href = 'https://www.gamesci.com.cn/';
        }
    }
};
</script>

<style>
.Nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 修改为顶部对齐 */
    background-color: transparent;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.Nav-left {
    display: flex;
    align-items: flex-start;
    /* 修改为顶部对齐 */
}

.Nav-left ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 设置为列方向以实现垂直排列 */
}

.Nav-left li {
    margin-bottom: 10px;
    /* 添加底部间距 */
}

.Nav-left li a {
    font-size: 24px;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-family: '华文行楷', sans-serif;
}

.Nav-left li a:hover,
.Nav-left li a:focus {
    background-color: #555;
}

.Nav-right {
    cursor: pointer;
    align-self: flex-start;
    /* 右侧元素也对齐到顶部 */
}

.Nav-right img {
    width: 120px;
    height: 35px;
}
</style>
